<!-- 生产数据趋势图 -->
<script lang="ts" setup>
import MyChart from '@/components/MyChart.vue'
import { ref, watch } from 'vue'
const props = defineProps(['data'])

watch(
  () => props.data,
  (val) => {
    console.log(val)
  }
)

const options = ref({
  color: ['#BFBFBF', '#F4EA2A', '#1AFA29', '#E98F36', '#D81E06'],
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '7%',
    left: 'center',
    textStyle: {
      color: '#8FE1FF',
      fontSize: 20
    }
  },
  itemStyle: {
    borderRadius: 5,
    borderColor: '#fff',
    borderWidth: 10
  },
  series: [
    {
      type: 'pie',
      center: ['50%', '55%'],
      radius: ['50%', '75%'],
      avoidLabelOverlap: false,
      label: {
        formatter: '{b}: {d}%', // 显示名称和百分比
        color: '#8FE1FF',
        fontSize: 22
      },
      // emphasis: {
      //   itemStyle: {
      //     shadowBlur: 10,
      //     shadowOffsetX: 0,
      //     shadowColor: 'rgba(0, 0, 0, 0.5)'
      //   }
      // },
      data: []
    }
  ]
})

watch(
  () => props.data,
  (val) => {
    const { list } = val
    options.value.series[0].data = list
  },
  {
    deep: true, // 开启深度监听
    immediate: true // 立即触发一次（可选）
  }
)
</script>
<template>
  <MyChart height="570px" :option="options" />
</template>
